<template>
    <el-form :model="form" label-width="120px">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="档案编号">
            <el-input v-model="form.userNum" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="姓名">
            <el-input v-model="form.name" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="老人照片">
            <el-upload
              action="api/employee/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              v-model="form.icon"
              disabled
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="性别" >
            <el-radio-group v-model="form.gender" disabled>
              <el-radio :label="1">男</el-radio>
              <el-radio :label="0">女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="年龄" >
            <el-input v-model="form.age" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="出生日期" >
            <el-date-picker
              v-model="form.birthday"
              type="date"
              placeholder="选择老人生日"
              value-format="yyyy-MM-dd"
              disabled
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="身份证号" >
            <el-input v-model="form.identity" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系电话">
            <el-input v-model="form.tel" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="现住地址">
            <el-cascader
              placeholder="请选择"
              v-model="form.currentAddress"
              :options="addressOptions"
              clearable
              filterable
              @change="handleAddressChange"
              disabled
            ></el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="详细地址">
            <el-input v-model="form.address" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="学历">
            <el-select v-model="form.education" placeholder="请选择" disabled>
              <el-option
                v-for="education in educations"
                :key="education.id"
                :label="education.name"
                :value="education.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="民族">
            <el-select v-model="form.nationid" placeholder="请选择" disabled>
              <el-option
                v-for="nation in nations"
                :key="nation.id"
                :label="nation.name"
                :value="nation.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="籍贯">
            <el-input v-model="form.nativeplace" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="婚姻状况">
            <el-select v-model="form.maritalstatus" placeholder="请选择" disabled>
              <el-option
                v-for="maritalstatus in maritalstatuses"
                :key="maritalstatus.id"
                :label="maritalstatus.name"
                :value="maritalstatus.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
  
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="社保类型">
            <el-select v-model="form.socialStatus" placeholder="请选择" disabled>
              <el-option
                v-for="socialStatus in socialStatuses"
                :key="socialStatus.id"
                :label="socialStatus.name"
                :value="socialStatus.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
  
        <el-col :span="8">
          <el-form-item label="社保卡号">
            <el-input v-model="form.socialCard" disabled></el-input>
          </el-form-item>
        </el-col>
  
        <el-col :span="8">
          <el-form-item label="经济来源">
            <el-select v-model="form.economicSources" placeholder="请选择" disabled>
              <el-option
                v-for="economicSources in economicSourcess"
                :key="economicSources.id"
                :label="economicSources.name"
                :value="economicSources.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="付费方式">
            <el-select v-model="form.economicSources" placeholder="请选择" disabled>
              <el-option
                v-for="payStatus in payStatuss"
                :key="payStatus.id"
                :label="payStatus.name"
                :value="payStatus.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <div class="urgent-message">
          <el-icon class="info-icon" name="info" disabled></el-icon>
          <span class="message-text">紧急联系人至少维护1人及以上</span>
        </div>
      </el-row>
  
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="紧急联系人1" disabled>
            <el-input v-model="form.emergencyContact" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="紧急联系电话1">
            <el-input v-model="form.emergencyTel" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="紧急联系人2">
            <el-input v-model="form.emergencyContact2" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="紧急联系电话2">
            <el-input v-model="form.emergencyTel2" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <div>
    <el-button type="primary" @click="back">返回</el-button>
    </div>
    </el-form>
  </template>
      
      <script>
  export default {
    data() {
      return {
        imageUrl: "",
        form: {
          userNum:"",
          name: "",
          icon: "",
          gender: 1,
          age: "",
          birthday: "",
          identity: "",
          tel: "",
          currentAddress: [],
          address: "",
          education: "",
          nationid: "",
          nativeplace: "",
          maritalstatus: "",
          socialStatus: "",
          socialCard: "",
          economicSources: "",
          payStatus: "",
          emergencyContact: "",
          emergencyContact2: "",
          emergencyTel: "",
          emergencyTel2: "",
        },
        socialStatuses: [
          { id: "0", name: "职工社保" },
          { id: "1", name: "居民社保" },
        ],
        payStatuss: [
          { id: "0", name: "自费" },
          { id: "1", name: "城乡职工医疗险" },
          { id: "2", name: "城乡居民医疗险" },
          { id: "3", name: "公费医疗照顾对象" },
          { id: "4", name: "公务员补助" },
          { id: "5", name: "其他" },
        ],
        economicSourcess: [
          { id: "0", name: "退休金" },
          { id: "1", name: "子女补贴" },
          { id: "2", name: "国家惠普型补贴" },
          { id: "3", name: "个人储蓄" },
          { id: "4", name: "其他" },
        ],
        maritalstatuses: [
          { id: "0", name: "未婚" },
          { id: "1", name: "已婚" },
          { id: "2", name: "离异" },
          { id: "3", name: "丧偶" },
        ],
        educations: [
          { id: "0", name: "小学" },
          { id: "1", name: "初中" },
          { id: "2", name: "高中" },
          { id: "3", name: "中专" },
          { id: "4", name: "大专" },
          { id: "5", name: "本科及以上" },
        ],
        nations: [],
        addressOptions: [
          {
            value: "省份ID",
            label: "省份名称",
            children: [
              {
                value: "城市ID",
                label: "城市名称",
                children: [
                  {
                    value: "县区ID",
                    label: "县区名称",
                  },
                  // 更多县区...
                ],
              },
              // 更多城市...
            ],
          },
          // 更多省份...
        ],
      };
    },
    methods: {
      back(){
      this.$router.push({ path: "/userArc" });
    },
      queryNation() {
        this.$axios.get("api/nation/queryNation").then((res) => {
          if (res.data.code == 200) {
            this.nations = res.data.data;
          }
        });
      },
  
      getLocations() {
        this.$axios.get("api/location/queryLocation").then((response) => {
          function removeChildrenForCounties(options) {
            for (const option of options) {
              if (option.children) {
                // 如果children是一个空数组，删除它
                if (option.children.length === 0) {
                  delete option.children;
                }
                // 否则，递归处理下一级的选项
                else {
                  removeChildrenForCounties(option.children);
                }
              }
            }
          }
  
          this.addressOptions = response.data.data;
          removeChildrenForCounties(this.addressOptions);
        });
      },
      handleAddressChange(value) {
        this.form.currentAddress = value;
      },
      handleAvatarSuccess(res, file) {
        this.imageUrl = res.data;
      },
      dataProcessing() {
        //数据处理
        const originalForm = this.$route.query.form;
        // 获取图片
        this.imageUrl = originalForm.icon;
  
        // 数字代码转为下拉列表的值
        const maritalstatus = this.maritalstatuses.find(
          (item) => item.id === String(originalForm.maritalstatus)
        );
        const payStatus = this.payStatuss.find(
          (item) => item.id === String(originalForm.payStatus)
        );
        const socialStatus = this.socialStatuses.find(
          (item) => item.id === String(originalForm.socialStatus)
        );
        const education = this.educations.find(
          (item) => item.id === String(originalForm.education)
        );
        const economicSources = this.economicSourcess.find(
          (item) => item.id === String(originalForm.economicSources)
        );
        originalForm.payStatus = payStatus ? payStatus.id : "";
        originalForm.economicSources = economicSources ? economicSources.id : "";
        originalForm.maritalstatus = maritalstatus ? maritalstatus.id : "";
        originalForm.socialStatus = socialStatus ? socialStatus.id : "";
        originalForm.education = education ? education.id : "";
  
        this.form = originalForm;
        this.form.currentAddress = originalForm.currentAddress.split(", ").map(function (item) {
          return parseInt(item, 10); // 第二个参数为进制基数，10代表十进制
        });
      },
    },
    created() {
      this.getLocations();
      this.queryNation();
      this.dataProcessing();
    },
  };
  </script>
      
    <style scoped>
  .el-row {
    margin-bottom: 20px;
  }
  .el-row:last-child {
    margin-bottom: 0;
  }
  .avatar {
    width: 120px; /* 调整为你需要的宽度 */
    height: 120px; /* 调整为你需要的高度 */
    object-fit: cover; /* 这条语句会使图片以 "cover" 模式显示，保持图片的本身比例长宽比，裁剪超出部分 */
  }
  .urgent-message {
    background-color: #cfe8ff; /* 淡蓝色背景 */
    color: #1890ff; /* 蓝色字体颜色 */
    padding: 10px;
    border: 1px solid #91d5ff; /* 淡蓝色边框 */
    border-radius: 5px;
    display: flex;
    align-items: center;
  }
  
  .info-icon {
    color: #1890ff; /* 蓝色图标颜色 */
    margin-right: 10px;
  }
  
  .message-text {
    font-weight: bold; /* 加粗字体 */
  }
  
  .right-align {
    text-align: right; /* 将内容右对齐 */
  }
  </style>